<template>
    <div class="person">
        <div class="person-banner">
            <div class="vp-avatar">
                <img :src="info.avatar" alt="">
            </div>
            <div class="person-message">
                <div>
                    {{info.user_name}}
                </div>
                <div>
                    {{info.address1}}
                </div>
                <div>
                    {{info.address2}}
                </div>
            </div>
        </div>
        <div class="person-list">
            <div class="person-item" @click="locationHref('/home/person/service')">
                <div class="person-item-left">
                    <i class="iconfont icon-tubiaoheji-"></i>
                    <span>我的服务({{info.my_server}})</span>
                </div>
                <i class="iconfont icon-zhuangxiuicon-"></i>
            </div>
            <div class="person-item" @click="locationHref('/home/content')">
                <div class="person-item-left">
                    <i class="iconfont icon-tubiaoheji-2"></i>
                    <span>装修进度及时间</span>
                </div>
                <i class="iconfont icon-zhuangxiuicon-"></i>
            </div>
            <div class="person-item">
                <div class="person-item-left">
                    <i class="iconfont icon-tubiaoheji-5"></i>
                    <span>户型图</span>
                </div>
                <i class="iconfont"></i>
                <div class="img-list">
                    <div>
                        <img :src="info.layout_img" alt="">
                    </div>
                </div>
            </div>
            <div class="person-item" @click="locationHref('/home/person/banner')">
                <div class="person-item-left">
                    <i class="iconfont icon-tubiaoheji-1"></i>
                    <span>效果图</span>
                </div>
                <div class="person-all">查看全部</div>
                <div class="img-list">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="img in info.design_img"><img :src="img" alt=""></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="person-close" @click="logout">
                退出登录
            </div>
        </div>
    </div>
</template>

<script>
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    export default {
        name:'home',

        data() {
            return {
                info:{}
            }
        },

        methods:{
            logout() {
                this.$alert.confirm('确定退出账号吗？').then(boo => {
                    if (boo) {
                        localStorage.clear('slug');
                        this.$router.push('/login');
                    }
                });
            },

            locationHref(url) {
                this.$router.push(url);
            }
        },

        components:{

        },

        mounted() {
            let mySwiper = new Swiper('.swiper-container', {
                loop: true,
                pagination : '.swiper-pagination',
                autoplay: 5000,
                observer: true,
                observeParents: true,
                slidesPerView : 3,
                centeredSlides : true,
            });

            this.axios.get('get_info',{ params: { id: localStorage.slug } }).then(data => {
                if (data.status == 200) {
                    this.info = data.data;
                } else {
                    this.$toast('获取用户信息失败,请重新登陆');
                    this.$router.push('/login');
                }
            })
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../../plugins/assets/css/flex.less';
    .person-banner {
        background: url('../../../assets/img/home/person_back.png') 0 0 no-repeat;
        background-size:cover;
        padding: 5vw;
        text-align: center;
        .vp-avatar {
            margin:0 auto;
        }
        .person-message {
            color: #fff;
            :first-child {
                font-size:5.5vw;
                font-weight:bold;
            }
            div {
                margin-top:4vw;
            }
        }
    }
    .person {
        background: #F7F9FA;
        padding-bottom: 50px;
    }
    .person-list{
        .person-item{
            background: #fff;
            .flex-between;
            padding: 5vw 2vw;
            margin-bottom: 5vw;
            &-left {
                .flex-left;
                i {
                    font-size:6vw;
                    margin-right: 5vw;
                    color: rgba(96,44,136,1);
                }
            }
            .img-list {
                width: 100%;
                margin-top: 3vw;
                img {
                    max-width: 30vw;
                    margin-right: 5vw;
                }
            }
            .person-all{
                color: #B9B9B9;
            }
        }
        .person-close{
            background: #fff;
            padding: 5vw 2vw;
            margin-bottom: 5vw;
            text-align: center;
            font-size:5vw;
            color: rgba(96,44,136,1);
        }
    }

</style>
